<!--
* 浮动层tip提示工具，可记住关闭，可显示关闭按钮，可自定颜色，自定内容
* 显示关闭按钮：属性：showClose
* 标记后缀 属性：strEnd
-->
<template>

    <div class="float-tips" v-if="ftVisible==1">
        <slot></slot>
        <a class="close" href=""  v-if="showClose" @click.prevent="ptHide()">X關閉</a>
    </div>
</template>

<script type="text/javascript">

	/*加载资源*/

    export default {
        name: 'floatTip',
	    props: {
        	//是否显示关闭
		    showClose: { type: Boolean, default: false },
		    //用于记住关闭的后缀
		    strEnd: { type: String, default: 'default' },
	    },
	    mixins:[],
        data () {
            return {
            	strStart: 'ftVisible-' , //储存标记的前缀
	            ftVisible:1,//页面tip可见性
            }
        },
        computed: {
        },
        created () {
	        //处理tip显示
	        localStorage.getItem(this.strStart + this.strEnd) == '0' && (this.ftVisible = 0)
        },
        methods:{
	        //隐藏
	        ptHide () {
		        localStorage.setItem(this.strStart + this.strEnd, '0'); this.ftVisible = 0
	        },
        }
    }
</script>

<style lang="less" scoped>

    /*公共变量*/
    @import '~@/assets/global.less';

    /*顶层tip*/
    .float-tips{
	    width:100%;background-color: rgba(255,255,255,0.95);text-align: center;padding:30px 20px 20px;
	    border-radius:0px;position: fixed;bottom:0px;left:0px;z-index: 999999;box-shadow: 0px 0px 50px rgba(0,0,0,0.2);
	    p{font-size: 18px;font-weight: bold;padding:2px 0px;}
	    a{color:#1E9FFF;text-decoration: underline}
	    a.close{font-size: 16px;color: #333333 !important;position: absolute;top:10px ;right: 10px;}

    }

    /**********************适应************************/
    @media screen and (max-width: @MINSCREEN){

    }



</style>
